<template>
  <div>
    <div class="top-box">
      <div class="tools-box">
        <div
          v-for="tool in tools"
          :key="tool.key"
          class="tool"
          @click="handleTrigger(tool.key)"
        >
          <img :src="require(`@/assets/images/${tool.iconClass}.png`)" alt="" />
          <div class="word">{{ tool.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    graph: ""
  },
  data() {
    return {
      tools: [
        {
          title: "保存",
          iconClass: "save",
          key: "save",
        },
        {
          title: "撤销",
          iconClass: "left",
          key: "onUndo",
        },
        {
          title: "前进",
          iconClass: "right",
          key: "onRedo",
        },
        {
          title: "放大",
          iconClass: "zoomIn",
          key: "zoomIn",
        },
        {
          title: "缩小",
          iconClass: "zoomOut",
          key: "zoomOut",
        },
        {
          title: "居中",
          iconClass: "center",
          key: "centerContent",
        },
        {
          title: "预览",
          iconClass: "view",
          key: "view",
        },
        {
          title: "开启框选",
          iconClass: "select",
          key: "select",
          status: false,
        },
        {
          title: "开启平移",
          iconClass: "move",
          key: "move",
          status: false,
        },
        {
          title: "退出",
          iconClass: "exit",
          key: "exit",
        },
      ],
    };
  },
  methods: {
    handleTrigger(command) {
      this.$emit("onCommand", command, this.tools);
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.top-box {
  display: flex;
}
.tools-box {
  display: flex;
  img {
    width: 15px;
    height: 15px;
  }
}
</style>
